<template>
  <el-dialog
    center
    :title="type == 'add' ? '添加' : '编辑'"
    v-model="Visible"
    width="30%"
    @close="handleClose"
  >
    <el-form
      :model="ruleForm"
      status-icon
      :rules="rules"
      ref="dialogForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="名称" prop="name">
        <el-input v-model="ruleForm.name"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="ruleForm.sex">
          <el-radio :label="0">男</el-radio>
          <el-radio :label="1">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          v-model="ruleForm.password"
          autocomplete="off"
          auto-complete="new-password"
        ></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input v-model="ruleForm.phone" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="ruleForm.email" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="state">
        <el-select
          v-model="ruleForm.state"
          placeholder="请选择"
          style="width: 100%"
        >
          <el-option
            v-for="item in stateOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          v-preventReClick
          @click="submitForm('ruleForm')"
          >确定</el-button
        >
        <el-button @click="handleClose">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import { reactive, toRefs, ref, onMounted, nextTick } from "vue";
import { editUser, addUser } from "@/api/user";
import { ElMessage } from "element-plus";
export default {
  name: "UpdatePassword",
  props: {
    Visible: {
      type: Boolean,
      default: false,
    },
    dialogRow: {
      type: Object,
      default: {},
    },
    type: {
      type: String,
      default: "add",
    },
  },
  setup(props, context) {
    const dialogForm = ref(null);

    const validatePhone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号码"));
      } else {
        if (!/^1[3456789]\d{9}$/.test(value)) {
          callback(new Error("手机号码不合法，请重新输入"));
        } else {
          callback();
        }
      }
    };
    const state = reactive({
      ruleForm: {
        name: "",
        sex: 0,
        password: "",
        email: "",
        phone: "",
        state: 0,
        sort: 100,
      },
      rules: {
        name: [{ required: true, message: "请输入用户名称", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        phone: [{ required: true, validator: validatePhone, trigger: "blur" }],
        state: [{ required: true, message: "请选择状态", trigger: "change" }],
        email: [
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
      },
      stateOptions: [
        {
          label: "在职",
          value: 0,
        },
        {
          label: "离职",
          value: 1,
        },
        {
          label: "锁定",
          value: 2,
        },
      ],
    });

    onMounted(() => {
      if (props.type == "add") {
        nextTick(() => {
          dialogForm.value.resetFields();
        });
      } else {
        state.ruleForm = props.dialogRow;
      }
    });
    const submitForm = () => {
      dialogForm.value.validate((valid) => {
        if (valid) {
          if (props.type == "add") {
            addUser(state.ruleForm).then((res) => {
              if (res.data.success) {
                ElMessage.success(res.data.msg);
                context.emit("refresh");
              }
            });
          } else {
            editUser(state.ruleForm).then((res) => {
              if (res.data.success) {
                ElMessage.success(res.data.msg);
                context.emit("refresh");
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    };

    const handleClose = () => {
      context.emit("close", false);
    };

    return {
      ...toRefs(state),
      submitForm,
      dialogForm,
      handleClose,
    };
  },
};
</script>
